<template>
  <div id="baseLineChart" ref="baseLineChart" :style="{ width: chartWidth, height: chartHeight }" />
</template>
<script>
import * as echarts from 'echarts'

export default {
  props: {
    chartData: {
      type: Object,
      default: () => { }
    },
    xAxis: {
      type: Array,
      default: () => []
    },
    chartWidth: {
      type: String,
      default: '100%'
    },
    chartHeight: {
      type: String,
      default: '50vh'
    },
    seriesName: {
      type: Array,
      default: () => []
    },
    chartUnit: {
      type: String,
      default: ''
    },
    chartTitle: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      baseLineChart: null
    }
  },
  computed: {
    chartOptions() {
      // 数据
      var captions = this.chartData.xAxisData // ['2018', '2019', '2020', '2021']// 时间
      const valueList = this.chartData.seriesData // [[0.0000, 0.0000, 2295122.0000, 34561000.0000], [0.0000, 180000.0000, 172399.0000, 2160000.0000], [14400000.0000, 0.0000, 7570184.0000, 5111400.0000]] // 数据汇合
      return {
        color: ['rgba(37, 99, 235, 0.40)', 'rgba(56, 121, 246, 1)', 'rgb(136,196,112)', 'rgba(255, 157, 68, 1)'],
        legend: {
          x: 'center',
          top: 0,
          itemHeight: 10,
          itemWidth: 10,
          textStyle: {
              fontSize: 11,
              color: '#666666'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
            top: 55,
            left: '2%',
            right: '2%',
            bottom: 20,
            containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: captions,
          axisTick: {
              show: false
          },
          splitLine: {
              show: false
          },
          axisLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(0,0,0,.1)'
              }
          },
          axisLabel: {
              interval: 0,
              textStyle: {
                  fontSize: 13,
                  color: 'rgba(0,0,0,.7)'
              }
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,.1)'
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              fontSize: 13,
              color: 'rgba(0,0,0,.7)'
            }
          }
        }],
        series: [
          {
            name: this.$t('投资金额'),
            type: 'bar',
            stack: 'echartValuation',
            barWidth: 20,
            data: valueList[0]
          },
          {
            name: this.$t('回款金额'),
            type: 'bar',
            stack: 'echartValuation',
            barWidth: 20,
            data: valueList[1]
          },
          {
            name: this.$t('项目估值'),
            type: 'line',
            symbol: 'none',
            smooth: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              shadowColor: 'rgba(0,0,0,0.3)',
              shadowBlur: 7,
              shadowOffsetY: 5
            },
            data: valueList[2]
          },
          {
            name: this.$t('现金流结余'),
            type: 'line',
            symbol: 'none',
            smooth: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              shadowColor: 'rgba(0,0,0,0.3)',
              shadowBlur: 7,
              shadowOffsetY: 5
            },
            data: valueList[3]
          }
        ]
      }
    }
  },
  watch: {
    chartData: {
      handler() {
        this.initData()
      },
      deep: true
    }
  },
  mounted() {
    this.initChart()
    this.initData()
  },
  methods: {
    initChart() {
      const _this = this
      _this.baseLineChart = echarts.init(this.$refs.baseLineChart)
      window.addEventListener('resize', function() {
        _this.baseLineChart.resize()
      })
    },
    initData() {
      this.baseLineChart.setOption(this.chartOptions, true)
    }
  }
}
</script>
